"use client"
import React, { useEffect, useState } from 'react'
import { Table, Button, Modal, Form, Popconfirm, Input, Select, Tag } from "antd";
import Tan from '../bpp/page'
import { deleteTableData, getTableData,searchTableDate } from "../Api/https"

export default function page() {
  const [title, settitle] = useState('添加')
  const [form] = Form.useForm();
  const [itemobj, setitem] = useState({})

  // 对话框
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // 数据
  const [tables, setTable] = useState([])
  async function shuju() {
    let res = await getTableData()
    setTable(res as any)
  }

  const columns = [
    {
      title: '订单编号',
      dataIndex: 'id',
    },
    {
      title: '订单标题',
      dataIndex: 'title',
    },
    {
      title: '关联客户',
      dataIndex: 'Associated_customer',
    },
    {
      title: '审批状态',
      dataIndex: 'stage',
      render: (stage:boolean) => {
        return (
          <>
            <Tag color={stage ? 'green' : 'red'}>{stage ? '已提交' : '未提交'}</Tag>
          </>
        )
      }
    },
    {
      title: '订单总金额',
      dataIndex: 'records',
      render: (records:number) => {
        return (
          <span>￥{records}</span>
        )
      }
    },
    {
      title: '已回款金额',
      dataIndex: 'price',
      render: (price:number) => {
        return (
          <span>￥{price}</span>
        )
      }
    },
    {
      title: '已开票金额',
      dataIndex: 'keys',
      render: (key:number) => {
        return (
          <span>￥{key}</span>
        )
      }
    },
    {
      title: '操作',
      dataIndex: 'id',
      render: (_, item : any) => {
        return (
          <>
            <a
              onClick={() => {
                settitle('编辑')
                setitem(item)
                showModal()
              }}
            >编辑</a>
            &emsp;
            <a onClick={()=>{
              let arr:any=[...tables].sort((a:any,b:any)=>{
                return a.id-b.id
              }) // 重新排序
              let index = arr.findIndex((v:any) => v.id === item.id) // 找到那条数据的索引
              let obj:any = arr[index] // 找到那条数据的对象
              arr = arr.filter((v:any) => v.id !== obj.id) // 过滤掉那条数据
              arr.unshift(obj) // 插入到最前面
              setTable(arr) // 重新赋值
            }}>置顶</a>
            &emsp;
            <Popconfirm
              title="删除这一条订单！"
              description="确定要删除这一条订单吗?"
              onConfirm={() => {
                deleteTableData(item.id)
                shuju()
              }}
              okText="确定"
              cancelText="取消"
            >
              <a>删除</a>
            </Popconfirm>
          </>
        )
      }
    }
  ];

 const onFinish = async (values: any) => {
    let res = await searchTableDate(values.title, values.Associated_customer, values.stage)
    setTable(res as any)
  };

  useEffect(() => {
    shuju()
  }, [])
  return (
    <div>
      {/* 添加 */}
      <div>
        <Form
        onFinish={onFinish}
          form={form}
          style={{ display: 'flex' }}
        >
          <Form.Item label="订单标题" name='title'>
            <Input placeholder='请输入订单标题' />
          </Form.Item>&emsp;

          <Form.Item label="关联客户" name='Associated_customer'>
            <Input placeholder='请输入关联客户' />
          </Form.Item>&emsp;

          <Form.Item label="审批状态" name='stage'>
            <Select placeholder='请输入审批状态'>
              <Select.Option value={true}>已提交</Select.Option>
              <Select.Option value={false}>未提交</Select.Option>
            </Select>
          </Form.Item>&emsp;

          <Form.Item>
            <Button type='primary' htmlType='submit'>搜索</Button>
          </Form.Item>&emsp;

          <Form.Item>
            <Button type='default' htmlType='reset' onClick={()=>{
              shuju()
            }}>重置</Button>
          </Form.Item>&emsp;

        </Form>
        <Button type="primary" onClick={() => {
          settitle('添加')
          setitem({})
          showModal()
        }}>
          +添加
        </Button>
        <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
          <Tan key={new Date().getTime()} title={title} itemobj={itemobj} onOk={handleOk} onCancel={handleCancel} shuju={shuju} />
        </Modal>

      </div>
      <br />
      {/* 表格 */}
      <Table dataSource={tables} columns={columns}
        pagination={{ // 分页配置
          defaultPageSize: 10,
          showSizeChanger: true,
          pageSizeOptions: [3, 5, 10, 15],
        }}
        style={{ minHeight: '700px', maxHeight: '100vh' }}
      />
    </div>
  )
}